<template>
  <a-card style="height: 100%;position: relative" class="pageView">
    <div class="box1" v-if="queryParam.keyWord ===''">
      <p style="margin-bottom:55px;color:#0168b7;text-align: center;font-size: 35px">审计知识检索(高级)</p>
      <a-input-search
        placeholder="请输入关键字"
        size="large"
        @search="onSearch">
        <a-button icon="search" slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
    </div>
    <div class="box2" v-else>
      <a-input-group compact>
        <j-dict-select-tag style="width:150px" size="large" v-model="queryParam.tab" placeholder="请选择"
                           dict-code="sj_senior_type"/>
        <a-input-search
          size="large"
          v-model="queryParam.keyWord"
          style="width: 40%"
          placeholder="请输入关键字"
          @search="onSearch">
          <a-button icon="search" slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
      </a-input-group>

      <div class="searchView">
        <a-divider class="divider">搜索结果</a-divider>
        <a-spin :spinning="loading" size="large">
          <ul class="list">
            <li v-for="(item,index) in dataSource" :key="index">
              <div style="margin: 15px;text-align: left">
                <a @click="onTitle(item)" style="font-size: 20px">{{item.title}}</a>
                <div style="margin: 10px 0;font-size: 18px;width: 100%;height: 80px;overflow: hidden"
                     v-html="changeKeyRed(item.contentShow,keyWord)"/>
                <div style="color: #bab8b8;font-size: 16px;">{{item.updateTime}}</div>
              </div>
            </li>
          </ul>
          <a-pagination style="margin-top: 35px"
                        v-model="pageNo"
                        :pageSize="pageSize"
                        @change="onPageChange"
                        :total="total"/>
        </a-spin>
      </div>
    </div>
    <contentView ref="contentView"></contentView>
  </a-card>
</template>

<script>

  import contentView from './contentView'
  import {httpAction, getAction} from '@/api/manage'

  export default {
    name: "高级查询",
    components: {
      contentView
    },
    data() {
      return {
        queryParam: {
          keyWord: '',
          tab: '-1',
          cate: '-1'
        },
        pageNo: 1,
        pageSize: 10,
        keyWord: '',
        loading: false,
        total: 0,
        dataSource: [],
        url: '/common/knowledgeCommon/getSearchAll'
      }
    },
    methods: {
      onSearch(val) {
        this.queryParam.keyWord = val
        this.keyWord = val
        this.pageNo = 1
        this.getData()
      },
      onPageChange(page) {
        this.pageNo = page
        this.getData()
      },
      onTitle(data) {
        data.content = this.changeKeyRed(data.content,this.keyWord)
        this.$refs.contentView.show(data)
      },
      getData() {
        this.loading = true
        getAction(this.url, {
          ...this.queryParam,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result;
            if (res.result.total) {
              this.total = res.result.total;
            }
          } else {
            console.log(res)
          }
          this.loading = false
        })
      },
      changeKeyRed(str, keyWord) {
        if (str != null && keyWord != null) {
          var substr = '/' + keyWord + '/g'
          var replaceStr = str.replace(eval(substr), "<span style='color:red;font-weight:bold'>" + keyWord + '</span>')
          return replaceStr
        } else {
          return str
        }
      },
    }
  }
</script>

<style scoped>
  .divider::after, .divider::before {
    border-top: 1px solid #a8d7ff !important;
  }

  .divider {
    color: #3498db;
  }

  .pageView {
    background: url(~@/assets/search-view.png) no-repeat;
    background-size: 100% 100%;
  }

  .searchView {
    width: 60%;
    padding: 0px 20px 20px 20px;
    margin: 0 auto;
    margin-top: 35px;

  }

  .searchView .list {
    overflow: auto;
    height: calc(100vh - 360px)
  }

  ul, li {
    list-style: none;
    text-decoration: none;
    padding: 0;
  }

  li {
    border-bottom: 1px dashed #c2c2c2;
  }

  .box1 {
    width: 550px;
    height: 100px;
    position: absolute;
    top: -45%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .box2 {
    margin-top: 20px;
    width: 100%;
    height: 100px;
    text-align: center;

  }
</style>